<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				width: 260px;
				height: 200px;
			}
			
			table tr td:first-child {
				text-align: right;
			}
			
			#showlt {
				border: 1px solid;
				width: 400px;
				height: 400px;
				position: relative;
			}
			
			#showlt>#showltnr {
				height: 75%;
				width: 100%;
				overflow: auto;
			}
			
			#showlt>#showltnr>p {
				width: 100%;
			}
			
			#showlt>#sendcontent {
				border: 1px solid #cccccc;
				height: 20%;
				width: 80%;
			}
			#qingqiu{
				width: 400px;
				height: 100px;
				border: 1px solid;
			}
			#qingqiu p{
				text-align: center;
			}
		</style>
	</head>

	<body>
		<fieldset id="dl">
			<legend>登录</legend>
			<table cellspacing="0" cellpadding="0">
				<tr>
					<td>用户名：</td>
					<td><input type="text" id="dlyhm" value="zhangsan" /></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="text" id="dlmm" value="123123" /></td>
				</tr>
				<tr>
					<td><input type="button" value="登录" onclick="login()" /></td>
					<td><input type="button" value="注册" id="zcbtn" /></td>
				</tr>
			</table>
		</fieldset>
		<fieldset id="zc">
			<legend>注册</legend>
			<table cellspacing="0" cellpadding="0">
				<tr>
					<td>用户名：</td>
					<td><input type="text" id="zcyhm" /></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="text" id="zcmm" /></td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: center;"><input type="button" value="立即注册" onclick="zcyh()" /></td>
				</tr>
			</table>
		</fieldset>
		<fieldset id="zzlt">
			<!--正在聊天-->
			<legend>聊天</legend>
			<p><span id="showusername">
				
			</span><span id="showdqltname"></span></p>
			<p><input type="text" id="targetname" /><input type="button" value="添加好友" onclick="addfriend()" /><input type="button" value="好友列表" onclick="showhylb()" /></p>
			<!--<p>说点什么：<input type="text" id="sendcontent" /><input type="button" value="发送" onclick="send()" /></p>-->
			<div id="hylb">
				<!--好友列表-->
				<p>好友列表</p>
				<ul>

				</ul>
			</div>
			<div id="showlt">
				<div id="showltnr">
					<!--聊天内容-->
				</div>
				<div contenteditable="true" id="sendcontent"></div>
				<input type="button" value="发送" onclick="send()" style="float: right; margin-top: -20px;" />
			</div>
		</fieldset>
		<div id="qingqiu">
			<p>打撒大撒</p>
			<p><input type="button" value="同意"/><input type="button" value="拒绝"/></p>
		</div>
		<script src="js/jmessage-sdk-web-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var JIM = new JMessage();
			$(function() {
				$("#zc").hide();
				$("#zzlt").hide();
				$("#showlt").hide();
				$("#qingqiu").hide();
				$("#zcbtn").click(function() {
					$("#dl").hide();
					$("#zc").show();
				})
			})

			function init() {
				JIM.init({
					"appkey": "16cc6f641b03dab291b12b7d",
					"random_str": "022cd9fd995849b58b3ef0e943421ed9",
					"signature": "E422A978DE37196588531CD0C42010B5",
					"timestamp": new Date().getTime()
				}).onSuccess(function(data) {
					console.log("初始化成功")
				}).onFail(function(data) {})
			}
			init(); //初始化
			//注册用户
			function zcyh() {
				JIM.register({
					'username': $("#zcyhm").val(),
					'password': $("#zcmm").val(),
					'is_md5': false
				}).onSuccess(function(data) {
					alert("注册成功！");
					$("#zc").hide();
					$("#dl").show();
					$("#dlyhm").val($("#zcyhm").val());
					$("#dlmm").val($("#zcmm").val())
				}).onFail(function(data) {
					alert("此用户名已存在！")
				});
			}

			function login() {
				JIM.login({
					'username': $("#dlyhm").val(),
					'password': $("#dlmm").val()
				}).onSuccess(function(data) {
					$("#dl").hide();
					$("#zzlt").show();
					getuserinfo();
					onMsgReceive();
					getFriendList() //获取好友列表
					onEventNotification()
					console.log("登录成功")
				});
			}

			function getuserinfo() { //获取当前登录的用户
				var username = JIM.current_user;
				JIM.getUserInfo({
					'username': username,
				}).onSuccess(function(data) {
					$("#showusername").html("欢迎【" + username + "】")
				}).onFail(function(data) {
					// do something
				});
			}

			function onMsgReceive() { //监听聊天消息事件
				JIM.onMsgReceive(function(data) {
					$("#showlt").show();
					$("#hylb").hide()
					var content = data.messages[0].content.msg_body.text;
					var form_name = data.messages[0].content.from_name;
					$("#showlt").attr("targetname", form_name);
					$("#showltnr").append($("<p style='text-align: right;'>" + content + " ：" + form_name + "</p>"))
				})
			}

			function onEventNotification() {
				JIM.onEventNotification(function(data) {
					$("#qingqiu>p:first-child").html(data.description)
					addfriendtongyi(data.from_username)
				});
			}

			function getFriendList() { //获取好友列表
				JIM.getFriendList().onSuccess(function(data) {
					for(var i in data.friend_list) {
						$("#hylb>ul").append($("<li onclick='kslt(this)'>" + data.friend_list[i].username + "</li>"))
					}
				}).onFail(function(data) {
					// do something
				});
			}

			function addfriend() {
				JIM.addFriend({
					'target_name': $("#targetname").val(),
					'from_type': 1,
					'why': "你好，朋友",
				}).onSuccess(function(data) {
					// do something
					setTimeout(function(){
						getFriendList();
					},1000)
				}).onFail(function(data) {
					// do something
					console.log("失败" + data)
				});
			}
			function addfriendtongyi(t){
				JIM.addFriend({
					'target_name': t,
					'from_type': 2,
					'why': "",
				}).onSuccess(function(data) {
					// do something
					getFriendList();
				}).onFail(function(data) {
					// do something
					console.log("失败" + data)
				});
			}

			function kslt(t) { //开始聊天
				$("#showdqltname").html("")
				var targetname = t.innerHTML;
				$("#showlt").show();
				$("#showlt").attr("targetname", targetname);
				$("#showdqltname").html($("<span>正在与" + targetname + "聊天</span>"))
				$("#hylb").hide()
			}

			function send() { //发送消息
				
				var name = $("#showlt").attr("targetname")
				JIM.sendSingleMsg({
					'target_username': name,
					'content': $("#sendcontent").html()
				}).onSuccess(function(data) {
					// do something
					$("#showltnr").append($("<p>我：" + $("#sendcontent").html() + "</p>"))
					$("#sendcontent").html("")
				}).onFail(function(data) {
					// do something
				}).onTimeout(function(data) {
					if(data.response_timeout) {
						// do something when response timeout
					} else {
						// do something when request timeout
					}
				}).onAck(function(data) {});
			}
			function showhylb(){
				$("#hylb").show();
				$("#showlt").hide()
			}
		</script>
	</body>

</html>